<template>
  <!-- Make a div wrapped slider,set height and width -->
  <div style="width:100%;margin:0 auto;background: #fff;">
    <!-- Using the slider component -->
    <slider ref="slider" @slide="handleSlide" :options="options">
      <!-- slideritem wrapped package with the components you need -->
      <slideritem :style="{'width':itemWidth}" v-for="(item,index) in imgList" :key="index">
        <img :style="'width:100%;height:'+itemHeight" :src="item" alt="">
      </slideritem>
      <!-- Customizable loading -->
      <div slot="loading">loading...</div>
    </slider>
  </div>
</template>
<script>
    // import slider components
    import { slider, slideritem } from 'vue-concise-slider'
    export default {
        props:[
            'imgList',
            'itemWidth',
            'itemHeight'
        ],
        data () {
            return {
                //data list [array]
                someList:[
                    {
                        html: 'slider1',
                        style: {
                            'background': '#4abf8a'
                        }
                    },
                    {
                        html: 'slider2',
                        style: {
                            'background': '#4bbfc3'
                        }
                    },
                    {
                        html: 'slider3',
                        style: {
                            'background': '#7baabe'
                        }
                    },
                    {
                        html: 'slider4',
                        style: {
                            'background': '#4abf8a'
                        }
                    },
                    {
                        html: 'slider5',
                        style: {
                            'background': '#4bbfc3'
                        }
                    },
                    {
                        html: 'slider6',
                        style: {
                            'background': '#7baabe'
                        }
                    }
                ],
                //Slider configuration [obj]
                options: {
                    currentPage: 0,
                    speed: 1000,
                    itemAnimation: true,
                    autoplay:5000,
                    centeredSlides: true,
                    thresholdDistance: 100,
                    thresholdTime: 300,
                    loopedSlides: 2,
                    slidesToScroll: 1,
                    loop: true,
                }
            }
        },
        components: {
            slider,
            slideritem
        },
        methods:{
            handleSlide(data){
                this.$emit('changeItem',data.currentPage);
            },
        },
        mounted() {

        }
    }
</script>
<style scoped>
  .slider-item {
    transform:scale(0.8);
    transition-timing-function: ease;
    transition-duration: 300ms;
  }
  .slider-item.slider-active {
    transform:scale(1.0);
    z-index: 999;
  }
  .slider-item.slider-active-copy {
    transform:scale(1.0);
    z-index: 999;
  }
</style>
